<template lang="">
    <div>
        <h2>销售退货</h2>
        <el-divider></el-divider>
        <el-form :inline="true" :model="serdate" class="demo-form-inline demo-form-inline-left">
  <el-form-item label="退货单号">
    <el-input v-model="serdate.salesReturnCode" placeholder="退货单号"></el-input>
  </el-form-item>
  <el-form-item label="销售单号">
    <el-input v-model="serdate.salesId" placeholder="销售单号"></el-input>
  </el-form-item>
  <el-form-item label="产品名称">
    <el-input v-model="serdate.productName" placeholder="产品名称"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary"  @click="GetSalesReturnDtoPes" icon="el-icon-search">查询</el-button>
     <el-button type="primary" class="el-icon-refresh-right"  @click="reseted">重置</el-button>
 <el-button type="success" @click="exportListToExcel(multipleSelection)">导出<i class="el-icon-upload el-icon--right"></i></el-button>
  </el-form-item>
</el-form>
        
        <template>
  <el-table
    :data="salesrelist"
    border
    style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="salesReturnCode"
      label="退货单号"
      >
    </el-table-column>
    <el-table-column
      prop="productName"
      label="产品名称"
    >
    </el-table-column>
    <el-table-column
      prop="productId"
      label="产品编号">
    </el-table-column>
      <el-table-column
      prop="specs"
      label="产品规格">
    </el-table-column>
    <el-table-column
      prop="unit"
      label="单位">
    </el-table-column>
    <el-table-column
      prop="price"
      label="单价">
    </el-table-column>
    <el-table-column
      prop="salesReturnNumber"
      label="退货数">
    </el-table-column>
     <el-table-column
      prop="salesReturnSum"
      label="总额">
    </el-table-column>
     <el-table-column
      prop="salesId"
      label="销售单号">
    </el-table-column>
     <el-table-column
      prop="clientName"
      label="客户名称">
    </el-table-column>
     <el-table-column
      prop="intState"
      label="订单状态">
<template slot-scope="sc">
    <span v-if="sc.row.intState2==1">创建订单</span>
    <span v-else-if="sc.row.intState2==2">订单确定</span>
    <span v-else>订单驳回</span>
</template>
    </el-table-column>
     <el-table-column
      prop="createTime"
      label="创建时间">
       <template slot-scope="scope">
        {{scope.row.createTime.substr(0,10)}}
      </template>
    </el-table-column>
    <el-table-column
      label="操作列" width="200px">
      <template slot-scope="scope" >
        <el-link type="warning" @click="View(scope.row.id)">查看</el-link>
        
        <el-link type="success" v-if="scope.row.intState==1" @click="disable(scope.row.salesReturnCode,scope.row.productName,scope.row.salesReturnSum)">审核</el-link>
        
      </template>
    </el-table-column>
  </el-table>
</template>
<!-- 弹出层查看详情 -->
<el-dialog title="退货详情" :visible.sync="dialogTableVisible">
  <el-descriptions title="退货信息" v-for="item in salesList" :key="item.id">
    <el-descriptions-item label="退货单号">{{item.salesReturnCode}}</el-descriptions-item>
    <el-descriptions-item label="单据类型">{{item.documentType}}</el-descriptions-item>
    <el-descriptions-item label="单据状态" v-if="item.intState2==1">创建订单</el-descriptions-item>
    <el-descriptions-item label="单据状态" v-else-if="item.intState2==2">订单完成</el-descriptions-item>
    <el-descriptions-item label="单据状态" v-else>订单驳回</el-descriptions-item>
    
    <el-descriptions-item label="销售单号">{{item.salesId}}</el-descriptions-item>
    <el-descriptions-item label="制单人">{{item.creator}}</el-descriptions-item>
    <el-descriptions-item label="制单日期">{{item.createTime.substr(0,10)}}</el-descriptions-item>

    <el-descriptions-item label="联系人">{{item.phones}}</el-descriptions-item>
    <el-descriptions-item label="客户编号">{{item.customrCode}}</el-descriptions-item>
    <el-descriptions-item label="客户名称">{{item.clientName}}</el-descriptions-item>

    <el-descriptions-item label="电话">{{item.phones}}</el-descriptions-item>
    <el-descriptions-item label="备注">{{item.comment}}</el-descriptions-item>
</el-descriptions>

 

  <el-table :data="salesList">
    <el-table-column property="productId" label="产品编号"></el-table-column>
    <el-table-column property="productName" label="产品名称"></el-table-column>
    <el-table-column property="specs" label="规格"></el-table-column>
    <el-table-column property="unit" label="单位"></el-table-column>
    <el-table-column property="inventory" label="数量"></el-table-column>
    <el-table-column property="" label="批次"></el-table-column>
    <el-table-column property="salesReturnNumber" label="退货数"></el-table-column>
    <el-table-column property="price" label="单价"></el-table-column>
    <el-table-column property="salesReturnSum" label="总额"></el-table-column>
  </el-table>
</el-dialog>


<!-- 确定付款 -->
<el-dialog title="审核退货" :visible.sync="paymentbles">
<el-form ref="form" :model="form" label-width="80px">
  <el-row>
  <el-col :span="8"><div class="grid-content bg-purple">
    <el-form-item label="流水号" >
    <el-input v-model="form.serialNumber" readonly></el-input>
  </el-form-item>
  </div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light">
    <el-form-item label="财务名称" >
    <el-input v-model="form.name" readpnly></el-input>
  </el-form-item>
  </div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple">
    <el-form-item label="支付方式">
    <el-select v-model="form.typeId" placeholder="支付方式">
      <el-option v-for="item in payTypelist" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
    </el-select>
  </el-form-item>
  </div></el-col>
</el-row>
  <el-row>
  <el-col :span="8"><div class="grid-content bg-purple">
    <el-form-item label="收款方">
    <el-input v-model="form.payee"></el-input>
  </el-form-item>
  </div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light">
    <el-form-item label="应付金额">
    <el-input v-model="form.payable" readpnly></el-input>
  </el-form-item>
  </div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple">
    <el-form-item label="实收金额" >
    <el-input v-model="form.netReceipts"></el-input>
  </el-form-item>
  </div></el-col>
</el-row>
  <el-row>
  <el-col :span="8"><div class="grid-content bg-purple">
     <el-form-item label="剩余金额">
    <el-input v-model="form.residue">
    </el-input>
  </el-form-item>
  </div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light">
    <el-form-item label="付款机构">
    <el-input v-model="form.payInstitution"></el-input>
  </el-form-item>
  </div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple">
   <el-form-item label="备注">
    <el-input v-model="form.remarks"></el-input>
  </el-form-item>
  </div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
    <el-form-item>
    <el-button type="primary" @click="onSubmit">通过</el-button>
    <el-button type="primary" @click="overrule">驳回</el-button>
    <el-button @click="qx">取消</el-button>
  </el-form-item>
  {{sId}}
</el-form>
</el-dialog>


<!-- 分页 -->
 <el-form :inline="true"  class="btu">
  <el-form-item >
    共{{page.totalCount}}条,共{{page.pageCount}}页,当前{{page.page}}/{{page.page.pageCount}}页,每页显示{{page.size}}条
    </el-form-item>
    <el-form-item >
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.page"
      :page-sizes="[2, 10, 15, 20]"
      :page-size="page.size"
      layout="sizes,slot, prev, pager, next"
      :total="page.totalCount" prev-text="上一页" next-text="下一页" >
      <button @click="handleCurrentChange(1)" :disabled="page.page==1">首页</button>
    </el-pagination>
    </el-form-item>
    <el-form-item >
        <el-pagination
      layout="slot, jumper"
      :total="page.totalCount" prev-text="上一页" next-text="下一页" >
      <button @click="handleCurrentChange(page.pageCount)" :disabled="page.page==page.pageCount">尾页</button>
    </el-pagination>
    
    </el-form-item>
</el-form>
    </div>
</template>
<script>
import { GetSalesReturnDtoPes, GetSalesReturnShow, UpdateStateSalesReturn, UpdaSalesReturn, GetPayType } from "@/api/BusinessServers/salesReturnSer";
import XLSX from 'xlsx';
import { autoGenerateCode } from "@/utils/utils";
export default {
  //数据
  data() {
    return {
      serdate: {
        salesId: "",
        salesReturnCode: "",
        productName: "",
      },
      page: {
        page: 1,
        size: 2,
        totalCount: 0,
        pageCount: 0,
      },
      salesrelist: [],
      //多表
      multipleSelection: [],
      salesList: [],
      //弹出层弹出
      dialogTableVisible: false,
      paymentbles: false,
      //财务表
      form: {
        salesReturnCode: "",
        serialNumber: "",
        name: "",
        typeId: "",
        payee: "",
        payable: 0,
        netReceipts: 0,
        residue: 0,
        payInstitution: "",
        remarks: "",
      },
      //财务类型集合
      payTypelist: [],
    }
  },
  //计算
  computed: {
    sId() {
      this.form.residue = this.form.payable - this.form.netReceipts;
      return this.form.residue;
    },
  },
  //方法
  methods: {
    //分页
    handleSizeChange(val) {
      this.page.size = val;
      this.GetSalesReturnDtoPes();
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.GetSalesReturnDtoPes();
    },
    //重置
    reseted() {
      this.serdate.salesId = "";
      this.serdate.salesReturnCode = "";
      this.serdate.productName = "";
      this.GetSalesReturnDtoPes();
    },
    //取消
    qx() {
      this.paymentbles = false;
    },
    //驳回
    overrule() {
      var myparams = {
        salesReturnCode: this.form.salesReturnCode
      }
      console.log(132456, myparams);
      UpdaSalesReturn(myparams).then(res => {
        if (res.data.code == 0) {
          this.$message({
            message: '驳回成功',
            type: 'success'
          });
          this.paymentbles = false;
          this.GetSalesReturnDtoPes();
        } else {
          this.$message.error('驳回失败');
        }
      })
    },
    //通过申请
    onSubmit() {
      var myparams = {
        salesReturnCode: this.form.salesReturnCode,
        serialNumber: this.form.serialNumber,
        name: this.form.name,
        typeId: this.form.typeId,
        payee: this.form.payee,
        payable: this.form.payable,
        netReceipts: this.form.netReceipts,
        residue: this.form.payable - this.form.netReceipts,
        payInstitution: this.form.payInstitution,
        remarks: this.form.remarks,
      }
      console.log(myparams);
      UpdateStateSalesReturn(myparams).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            message: '审核成功',
            type: 'success'
          });
          this.paymentbles = false;
          this.GetSalesReturnDtoPes();
        } else {
          this.$message.error('审核失败');
        }
      })
    },
    //弹出层开启财务
    disable(id, name, sum) {
      console.log(id, name, sum);
      this.form.salesReturnCode = id;
      this.form.name = "[退货]" + name;
      this.form.payee = sessionStorage.getItem("encode");
      this.form.payable = sum;
      this.paymentbles = true;
      this.GetPayType();
      this.UpdateStateSalesReturns(id);
      this.overrule(id);
    },
    //财务类型
    GetPayType() {
      GetPayType().then((res) => {
        console.log(res);
        this.payTypelist = res.data.data;
      })
    },
    //弹出详细
    View(id) {
      this.dialogTableVisible = true;
      this.GetSalesReturnShow(id);

    },
    //导出
    exportListToExcel(dataList) {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: '请选择要导出的数据',
          type: 'warning'
        });
        return;
      }
      // 过滤需要导出的字段
      const filteredData = dataList.map(item => {
        return {
          退货单号: item.salesReturnCode,
          产品名称: item.productName,
          产品编号: item.productId,
          产品规格: item.specs,
          单位: item.unit,
          单价: item.price,
          退货数: item.salesReturnNumber,
          总额: item.salesReturnSum,
          销售单号: item.salesId,
          客户名称: item.clientName,
          订单状态: item.state ? "创建订单" : "订单确认",
          创建时间: item.createTime,
        };
      });
      const worksheet = XLSX.utils.json_to_sheet(filteredData);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
      // 导出Excel文件   
      XLSX.writeFile(workbook, '销售退货列表.xlsx');
    },
    //获取多个列表集合
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //销售退货
    GetSalesReturnDtoPes() {
      var myparams = {
        salesId: this.serdate.salesId,
        salesReturnCode: this.serdate.salesReturnCode,
        productName: this.serdate.productName,
        page: this.page.page,
        size: this.page.size,
      }
      GetSalesReturnDtoPes(myparams).then((res) => {
        console.log(1111, res.data.data);
        this.salesrelist = res.data.data;
        this.page.totalCount = res.data.totalCount;
        this.page.pageCount = res.data.pageCount;
      })
    },
    //详情
    GetSalesReturnShow(id) {
      var myparams = {
        id: id
      }
      GetSalesReturnShow(myparams).then((res) => {
        console.log(11111111111, res.data);
        console.info(11111111111, res.data);
        console.table(res.data);
        this.salesList = res.data;
      })
    },
  },
  //挂载
  mounted() {
    this.GetSalesReturnDtoPes();
    this.form.serialNumber = autoGenerateCode("LS");
  },
}
</script>
<style lang="">
   .btu{
   margin-top: 100px;
} 
.demo-form-inline-left {
  text-align: left;
}
.tspan {
  display: inline-block;
  width: 20%; /* 每个元素宽度 */
  text-align: center; /* 文本居中显示 */
  margin-right: 5%; /* 右边距设置为间距大小 */
}
span:last-child {
  margin-right: 0; /* 最后一个元素去除右边距 */
}
</style>